<template>

    <div>

        <el-dialog title="修改头像" v-model="diavisible" width="500">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
                <el-form-item prop="nickName" label="昵称">
                    {{ ruleform.nickName }}
                </el-form-item>
                <el-form-item prop="checkCode">
                    <el-upload class="avatar-uploader" action="" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :http-request="httprequest"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <!-- <el-input v-model="ruleForm.checkCode" style="width: 55%;margin-right: 10px;"
                        placeholder="请输入验证码" />
                    <img :src="src" alt="" style="display: inline-block;cursor:pointer" @click="getsrc"> -->
                </el-form-item>
                <el-form-item>
                    <div style="text-align: right;    width: 100%;">
                        <el-button style="float: right;margin-left: 10px;" @click="updateavatar"
                            type="primary">确定</el-button>
                        <el-button style="float: right;" @click="reset" type="primary">取消</el-button>


                    </div>
                </el-form-item>
            </el-form>

        </el-dialog>
    </div>
</template>

<script setup>
import service from '@/utils/Request';
import { ref } from 'vue';
const ruleform = ref({});
const imageUrl = ref("")
const diavisible = ref(false)
const emit = defineEmits(["updateavatar"])
const file = ref(null);
const open = (e) => {
    console.log(e)
    ruleform.value = e
    imageUrl.value = "/api/getAvatar/" + ruleform.value.userId;
    diavisible.value = true



}
const httprequest = (e) => {
    console.log(e, "e")
    file.value = e.file;
    // imageUrl.value = e.file
    let img = new FileReader();
    img.readAsDataURL(e.file);
    img.onload = ({ target }) => {
        imageUrl.value = target.result;
    }

}
const reset = () => {
    diavisible.value = false;

}
const updateavatar = async () => {
    const res = await service.post("/updateUserAvatar", { avatar: file.value });
    console.log(res)
    diavisible.value = false;
    emit("updateavatar")

}
defineExpose({
    open
})

</script>
<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>